<template>
  <div>
    <a-tag color="#55acee">
      <template #icon>
        <linkedin-outlined />
      </template>
      socket.client.id：{{ socketId }}
    </a-tag>
    <a-table :data-source="listData" :loading="loading" row-key="id">
      <a-table-column key="host" :width="150" data-index="host" title="Host" />
      <a-table-column key="port" :width="100" data-index="port" title="端口" />
      <a-table-column key="username" :width="100" data-index="username" title="用户名" />
      <a-table-column key="password" :width="100" data-index="password" title="密码" />
      <a-table-column key="name" data-index="name" title="名称" />

      <a-table-column key="log" data-index="log" :width="200" title="日志">
        <template #default="{record}">
          <div style="width:100%;height:100px;overflow-y: auto;" v-html="record.log">
          </div>
        </template>
      </a-table-column>
      <a-table-column key="state" :width="100" data-index="state" title="状态">
        <template #default="{ text: state }">
          <span>
            <a-tag v-if="state===0" color="red">
              <template #icon>
                <close-circle-outlined />
              </template>
              未连接
            </a-tag>
            <a-tag v-else-if="state===1" color="green">
              <template #icon>
                <check-circle-outlined />
              </template>
              已连接
            </a-tag>
            <a-tag v-else color="default">
              <template #icon>
                <minus-circle-outlined />
              </template>
              未知
            </a-tag>
          </span>
        </template>
      </a-table-column>

      <a-table-column key="action" title="操作" :width="200">
        <template #default="{ record }">
          <span>
            <a-button type="default" :loading="record.loading" :disabled="record.serverId!==''" @click="eventServerInit(record)">
              init
            </a-button>
            <a-divider type="vertical" />
            <a-button type="default" :loading="record.loading" :disabled="record.state===1" @click="eventServerConnect(record)">
              connect
            </a-button>
            <a-divider type="vertical" />
            <a-button type="default" :loading="record.loading" @click="eventServerInitEnv(record)">
              init_env
            </a-button>
            <a-button type="default" :loading="record.loading" @click="eventServerUploadNginx(record)">
              upload_nginx
            </a-button>
            <a-button type="default" :loading="record.loading" @click="eventServerUnzipNginx(record)">
              unzip_nginx
            </a-button>
            <a-button type="default" :loading="record.loading" @click="eventServerUploadChildConfig(record)">
              upload_child_config
            </a-button>
            <a-button type="default" :loading="record.loading" @click="eventServerStartNginx(record)">
              start_nginx/reset_nginx
            </a-button>

          </span>
        </template>
      </a-table-column>

      <template #action="{ record }">
        <span>
          <a-button type="default" :loading="record.loading" :disabled="record.serverId!==''" @click="eventServerInit(record)">
            init
          </a-button>
          <a-divider type="vertical" />
          <a-button type="default" :loading="record.loading" :disabled="record.state===1" @click="eventServerConnect(record)">
            connect
          </a-button>
          <a-divider type="vertical" />
          <a-button type="default" :loading="record.loading" @click="eventServerInitEnv(record)">
            init_env
          </a-button>
          <a-button type="default" :loading="record.loading" @click="eventServerUploadNginx(record)">
            upload_nginx
          </a-button>
          <a-button type="default" :loading="record.loading" @click="eventServerUnzipNginx(record)">
            unzip_nginx
          </a-button>
          <a-button type="default" :loading="record.loading" @click="eventServerUploadChildConfig(record)">
            upload_child_config
          </a-button>
          <a-button type="default" :loading="record.loading" @click="eventServerStartNginx(record)">
            start_nginx/reset_nginx
          </a-button>
          <a-button type="default" :loading="record.loading" @click="eventServerStartNginx(record)">
            复制老config文件
          </a-button>
          <!-- <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions
            <down-outlined />
          </a> -->
        </span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
// import HelloWorld from "./components/HelloWorld.vue";
import { io, Socket } from "socket.io-client";
import { getServerList } from "./api/server";
import linq from "linq";
import { message } from "ant-design-vue";
import { Response } from "../declare";
@Options({
  components: {
    // HelloWorld,
  },
})
export default class App extends Vue {
  client?: any;
  socketId = "";
  loading = false;
  listData: Array<any> = [];
  eventSend(): void {
    this.client.emit("hi", "hello!");
  }
  loadData(): void {
    this.loading = false;
    getServerList({})
      .then((res: any) => {
        this.listData = res.data;
        this.loading = false;
      })
      .catch((e) => {
        this.loading = false;
      });
  }
  eventServerInit(row: any): void {
    row.loading = true;
    this.client.emit("server_init", row);
  }
  eventServerConnect(row: any): void {
    row.loading = true;
    this.client.emit("server_connect", row);
  }
  eventServerInitEnv(row: any): void {
    row.loading = true;
    this.client.emit("server_init_env", row);
  }
  eventServerUploadNginx(row: any): void {
    row.loading = true;
    this.client.emit("server_upload_nginx", row);
  }
  eventServerUnzipNginx(row: any): void {
    row.loading = true;
    this.client.emit("server_unzip_nginx", row);
  }
  eventServerUploadChildConfig(row: any): void {
    row.loading = true;
    this.client.emit("server_upload_child_config", row);
  }
  eventServerStartNginx(row: any) {
    row.loading = true;
    this.client.emit("server_start_nginx", row);
  }
  eventServerCopyOldNginxConfig(row: any) {
    row.loading = true;
    this.client.emit("server_copy_old_nginx_config", row);
  }
  mounted() {
    const client = io({
      path: "/websocket",
    });
    //接收来自服务端的信息事件
    client.on("server_copy_old_nginx_config", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
        // message.info("nginx 启动完成.");
      }
    });
    client.on("server_start_nginx", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
        // message.info("nginx 启动完成.");
      }
    });
    client.on("server_unzip_nginx", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
        // message.info("nginx 解压完成.");
      }
    });
    client.on("server_upload_nginx", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
        message.info("上传成功.");
      } else {
        message.error("上传失败.");
      }
    });
    client.on("server_upload_child_config", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
        message.info("上传成功.");
      } else {
        message.error("上传失败.");
      }
    });
    client.on("connect", () => {
      this.socketId = client.id;
    });
    client.on("server_init", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.serverId = data.serverId;
        message.info("初始化成功.");
      } else {
        message.info("初始化失败.");
      }
    });
    client.on("server_connect", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.state = 1;
        message.info("连接成功.");
        console.log(data);
      } else {
        message.info("连接失败.");
      }
    });
    client.on("server_init_env", (result: Response) => {
      const { data } = result;
      const row = linq.from(this.listData).single((x) => x.id === data.data.id);
      row.loading = false;
      if (result.success) {
        row.log = `${row.log}<br/>${data.remoteData}`;
      }
    });

    this.client = client;
    this.loadData();
  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  width: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
